 /**
  * 
  * @authors Your Name (you@example.org)
  * @date    2018-08-23 09:03:57
  * @version $Id$
  */
//时钟函数（定时器实现）
 var id = setInterval(function() {
     var year = document.getElementById("year");
     var time = document.getElementById("time");
     //获取当当前系统的时间
     var n = new Date();
     year.innerHTML = `<span>${n.getFullYear()} / ${n.getMonth()+1} / ${n.getDate()} -星期${n.getDay()}</span>`;
     time.innerHTML = `<span>${n.getHours()} : ${n.getMinutes()} : ${n.getSeconds()}</span>`;
     //函数1秒钟执行一次
 }, 1000);
//当点击页面上的“在线进制转换”时执行该函数
 function fn() {
     var main = document.getElementById("main");
     //先将“main”的所有标签清空；
     main.innerHTML = "";
     main.innerHTML = `<div id="new-world"><h1>在线进制转换器</h1>
                            <div class="fn-input">
                                <label>原进制为:</label><select class="init" size="1"></select><label >需要转化的进制为：</label><select class="target" size="1"></select><br>
                                <label for="input">请输入数字:</label><input  id="input" value=""><br/>
                                <button onclick="fn1()">转换</button>
                            </div>

                            <div class="fn-output">
                                <label for="output">转化的值为:</label><input  id="output" value="">
                            </div></div>`;
    //获取到生成的标签里的值
     var e = document.getElementsByClassName("init")[0];
     var f = document.getElementsByClassName("target")[0];
     //循环生成下拉框中的内容（实现选中进制）
     for (var i = 2; i <= 36; i++) {
         e.innerHTML += `<option value="${i}">${i}进制</option>`;
         f.innerHTML += `<option value="${i}">${i}进制</option>`;
     }
 }
//该函数实现任意进制转换；
 function fn1() {
     var init = document.getElementsByClassName("init")[0].value;
     var target = document.getElementsByClassName("target")[0].value;
     var input = document.getElementById("input").value;
     var output = document.getElementById("output"),
         n, m;
    //将要转化的值转化成十进制；在转化成想要的进制；
     n = parseInt(input, init);
     output.value = n.toString(target);
 }
//该函数实现在“main”标签里生成Unicode转码的内容
 function uni() {
     var mai = document.getElementById("main");
     main.innerHTML = "";
     main.innerHTML = `<div id="new-world"><h1>在线UniCode编码转换</h1>
            <div class="un-d1">
            <form>
            <div><textarea placeholder="请输入中文，英文或者字符串" value=""></textarea></textarea></div>
            <div class="bt"><input type="button" value="转换成Unicode编码" onclick="unUni();"/><br/>
            <input type="button" value="转换成中文" onclick="unChi();"/></div>
            <div><textarea placeholder="Unicode编码" value=""></textarea></div>
            </form>
            </div></div>`;
 }
//该函数实现Unicode在线转码----中文转换成Unicode；
 function unUni() {
     var str = document.getElementsByTagName("textarea")[0].value;
     var endU = document.getElementsByTagName("textarea")[1];
     //循环遍历输入的字符串；
     for (let i = 0; i < str.length; i++) {
         if (i == 0) { endU.value = ""; }
         let numS = str.charCodeAt(i);
         let num = "\\u" + (numS).toString(16);
         endU.value += num;
     }
 }
//该函数实现Unicode转化成中文；
 function unChi() {
     var strr = document.getElementsByTagName("textarea")[1].value;
     var endS = document.getElementsByTagName("textarea")[0];
     //以符串中的“\\u”分隔成数组
     var str = strr.split("\\u");
     for (var i = 1; i < str.length; i++) {
         if (i == "1") {
             endS.value = "";
         }
         var cunstr = str[i]
         cunstr = parseInt(cunstr, 16);
         cunstr = String.fromCharCode(cunstr);
         endS.value += cunstr;
     }
 }
//回调函数：循环生成按钮；
 function comt(obj) {
     console.info(obj);
     var main = document.getElementById("main");
     main.innerHTML = `<div id="new-world"><div id="comp-1">
        <h2>专用计算器</h2>
        <form oninput="compOut()">
        <input  class="output" name="output" autofocus><br>
        </form>
        </div>
        </div>`;
    //循环生成按钮，判断并换行
     var form = document.getElementsByTagName("form")[0];
     for (let i = 0; i < obj.length; i++) {
         if (i == 3 || i == 7 || i == 11 || i == 15) {
             form.innerHTML += `<input type="button" class="test" value="${obj[i]}" onclick=""/><br/>`;
         } else {
             form.innerHTML += `<input type="button" class="test" value="${obj[i]}" onclick=""/>`;
         }
         //判断该按钮的value值是否是“=，c，ce”，如果是，生成新的classname；
         if (obj[i] == "=") {
             form[i + 1].setAttribute("onclick", "eva()");
             form[i + 1].className = "equal";
         }
         if (obj[i] == "C") {
             form[i + 1].setAttribute("onclick", "cleaA()");
             form[i + 1].className = "clr";
         }
         if (obj[i] == "CE") {
             form[i + 1].setAttribute("onclick", "clea()");
             form[i + 1].className = "back";
         }
     }
     //当点击按按钮时，在输入框中显示相应的值；
     var n = document.getElementsByClassName('test');
     for (let i = 0; i < n.length; i++) {
         n[i].onclick = function() { document.getElementsByClassName('output')[0].value += this.value; }
     }
 }
//当点击计算器的等号按钮时，执行该函数
 function eva() {
     var f = document.getElementsByClassName('output')[0].value;
     document.getElementsByClassName('output')[0].value = eval(f);
 }
//当点击计算器的退格按钮时，执行该函数
 function clea() {
     var f = document.getElementsByClassName('output')[0].value;
     //清除输入框的最后一个字符
     document.getElementsByClassName('output')[0].value = f.slice(0, -1);
 }
//点击清屏按钮执行该函数
 function cleaA() {
     var f = document.getElementsByClassName('output')[0].value;
     document.getElementsByClassName('output')[0].value = null;
 }
//验证输入框中最后一位是否为“=”，
 function compOut() {
     var f = document.getElementsByClassName('output')[0].value;
     var g;
     if (f.slice(-1, f.lenght) == "=") {
        //将g赋值给字符串的=号前的字符串
         g = f.slice(-(f.lenght), -1);
         document.getElementsByClassName('output')[0].value = eval(g);
     }
 }
//该函数获取到json文件中的对象；
 function comp(fn2) {
     var xhr = new XMLHttpRequest();
     xhr.open("post", "../json/computer.json");
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhr.send();
     xhr.onreadystatechange = function() {
        //当获取成功时执行下面；
         if (xhr.readyState == 4 && xhr.status == 200) {
             var v = xhr.responseText;
             v = JSON.parse(v);
             console.info(v);
             fn2(v.value);
         }
     }
 }
//回调函数，该函数用获取到的json文件的值来实现在线英语默写系统
 function exam(obj) {
     var main = document.getElementById("main");
     main.innerHTML = "";
     var arr = Object.keys(obj);
     var value = Object.values(obj);
     //用获取到的对象的键和值分别生成卡片
     for (let j = 0; j < arr.length; j++) {
         main.innerHTML += `<div class="world">
                <h2>第${j+1}题 -</h2>
                <h3 class="a">${arr[j]} </h3><br/>
                <label>请输入正确答案</label>
                <input type="text" class="inp"><br/>
                <button type="" onclick="exa(this)">下一题</button>
            </div>`;
     }
     //当在在最后一个卡片时，相应的按钮的功能改变
     document.getElementsByTagName("button")[arr.length - 1].setAttribute("onclick", "printAll()");
     document.getElementsByTagName("button")[arr.length - 1].innerText = "查看结果";
     var arrKeys = document.getElementsByTagName("h2")
     //对超出父盒子的卡片隐藏
     var arr1 = {};
     window.exa = function(btn) {
         btn.closest("div.world").style.cssText = "display:none;"

     }
     //判断输入的的值是否与对象的值一致；
     window.printAll = function() {
         var inp = document.getElementsByClassName("inp");
         for (let i = 0; i < value.length; i++) {
             if (inp[i].value == value[i]) {
                 arr1[arrKeys[i].innerText] = "true";
             } else {
                 arr1[arrKeys[i].innerText] = "false";
             }
         }
         //生成考试结果
         main.innerHTML = `<div id="printAll"><h3>本次测试结果</h3></div>`;
         var print = document.getElementById("printAll");
         for (let i in arr1) {
             print.innerHTML += `<span class="title">${i}----></span><span class="result">${arr1[i]}</span><br>`;
         }
         //对正确和错误的答案分别设置不一样的颜色；
         var result = document.getElementsByClassName("result");
         for (let i = 0; i < result.length; i++) {
             if (result[i].innerText == "true") {
                 result[i].style.cssText = "color:green;";
             } else {
                 result[i].style.cssText = "color:red;";
             }
         }
     }
 }

//该函数获取json文件中的对象，用于生成“在线单词默写系统”
 function word(fn3) {
     var xhr = new XMLHttpRequest();
     xhr.open("post", "../json/world.json");
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhr.send();
     xhr.onreadystatechange = function() {
         if (xhr.readyState == 4 && xhr.status == 200) {
             var v = xhr.responseText;
             v = JSON.parse(v);
             fn3(v);
         }
     }
 }
//点击返回首页时执行该函数
 function header() {
     location.replace("index.html");
 }
//点击联系我们时执行该函数
 function tellMe() {
     var main = document.getElementById("main");
     //生成新的页面
     main.innerHTML = "";
     main.innerHTML = ` <div id="footer">
        <span>联系我们</span>
        <div class="contact">
            <div>
                <span class="fa fa-user-o" style="color: white;"></span>
                <input type="text" name="realname" placeholder="请输入您的真实姓名">
            </div>
            <div>
                <span class="fa fa-mobile-phone" style="color: white;font-size: 24px;"></span>
                <input type="text" name="tel" placeholder="请输入您的手机号码">
            </div>
            <button class="btnF" style="background-color: #13A96D;" onclick="alert(该功能暂未开放)">咨询更多<tton>
            <button class="btnF"onclick="tell()">联系我们<tton>
        </div>
    </div>`;
    //正则判断电话号码是否正确；
     window.tell = function() {
         var tell = document.getElementsByName("tel")[0].value;
         var realname=document.getElementsByName("realname")[0].value;
         var tel = tell.match(/^(1[3-9])\d{9}$/);
         if (tel == null) {
             alert("请输入正确的电话号码");
             return false;
         } else {
             alert("恭喜你，提交成功！！");
         }
     }
 }